<template>
  <div class="home">
    <van-swipe v-if="bannerList" class="banner" autoplay="1000" :loop="false">
      <template v-for="item in bannerList">
          <van-swipe-item  v-if="item.flag" :key="item.bannerid">
              <img :src="item.img" alt="">
          </van-swipe-item>
      </template>
    </van-swipe>

    <van-grid class="home-guild" :column-num="5" :gutter="10" square>
          <van-grid-item v-for="value in 10" :key="value" icon="photo-o" text="文字"></van-grid-item>
    </van-grid>
  <!-- :immediate-check="false" -->
    <van-list 
    class="list" 
    ref="one" 
    v-model:loading="loading" 
    :finished="finished" 
    finished-text="没有更多了"
    loading-text="加载中" 
    @load="onLoad" 
    :immediate-check="false"
    >
  
      <div class="list-item" v-for="item in proList" :key="item.proid">
        <Router-link to="/detail">
          <van-image
            width="172"
            height="172"
            :src="item.img1"
          />
          <van-text-ellipsis
              rows="2"
              :content="item.proname"
          />
          <van-row>
            <van-space>
              <van-tag round type="success">{{ item.category }}</van-tag>
              <van-tag round type="success">{{ item.brand }}</van-tag>
            </van-space>
          </van-row>
          <van-row>
            <van-space>
              <p>{{ (item.originprice * item.discount/10).toFixed(2) }}</p>
            </van-space>
          </van-row>
           

        </Router-link>
      </div>
    </van-list>
  </div>
</template>

<script setup lang="ts">
  import type { Ref } from 'vue';
  import { ref, reactive} from "vue"
  import { getBannerListAPI } from '@/api/banner';
  import { RouterLink } from 'vue-router';
  import { onMounted } from "vue";
  import { showSuccessToast,showFailToast } from 'vant';
  import { getProListAPI } from '@/api/product';
// import type { get } from 'lodash';
  let bannerList:Ref<any> = ref(null)
  let proList: Ref<any> = ref([]);

  let pageParams = reactive<PageRaw>({
      count: 1,
      limitNum: 1
  })
  let loading = ref<boolean>(false)
  let finished = ref<boolean>(false)

  let getBannerList = async()=>{
    try{
      let result = await getBannerListAPI()
      console.log("轮播请求成功");
      
      bannerList.value = result.data
    }catch(err:any){
      showFailToast(err.message)
    }
  }
  let getProList = async()=>{
    try{
      let result = await getProListAPI()
      console.log("商品列表请求成功",result);

      proList.value = [...proList.value, ...result.data]; // 原数据拼接新数据
    }catch(err: any){
      showFailToast(err.message)
    }
  }
  let onLoad = async () => {
    console.log("准备加载");

    pageParams.count++;

    await getProList();

    loading.value = false;

    if (pageParams.count >= 5) {
        finished.value = true;
        console.log("加载成功1");
        
    }
  }
  // let onLoad = ()=>{
  //   console.log("准备加载");

  //   if(pageParams.count == 1){
  //     // 页面还未加载数据
  //     getProList()
  //   }else{

  //   }
  // } 
  onMounted(() => {
    getBannerList();
    getProList()
  })

    
</script>

<style lang="scss" scoped>
.home{
  background-color: #f6f6f6;
}
.banner {
    width: 350px;
    // height: 150px;   
    margin: 10px auto;
    border-radius: 4px;
    overflow: hidden;

    img {
        width: 375px;
    }
}
.home-guide{
  width: 355px;
  margin: 10px auto;
}
.list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  column-width: 10px;
  padding-bottom: 100px;
  // // css3 瀑布流
  // padding: 0 15px;
  // // 分几列
  // column-count: 2;
  // // 列间距
  // column-gap: 10px;
  // padding-bottom: 100px;
    p{
    color: #ff4142;
    font-size: 18px;
    font-weight: bold;
  }
}
  .list .list-item{
    width: 172px;
    background-color: #fff;
    margin-bottom: 10px;
    
  }

</style>